<style scoped>
  .tableCss {
    border: 1px solid #ccc;
    border-collapse: collapse;
    width: 100%;
  }

  .tableCss tr td {
    padding: 0 10px;
    line-height: 34px;
    text-align: left;
    border: 1px solid #ccc;
  }

  .bg {
    background: #eee;
    text-align: right !important;
    width: 150px;
  }
</style>

<template>
  <div>
    <table class="tableCss">
      <tbody>
      <tr>
        <td class="bg">采购组织:</td>
        <td>{{dialogClauseData.purOrgName}}</td>
        <td class="bg">报价模版:</td>
        <td>{{dialogClauseData.templateType}}</td>
        <td class="bg">物料编码:</td>
        <td>{{dialogClauseData.materialCode}}</td>
      </tr>
      <tr>
        <td class="bg">物料名称:</td>
        <td>{{dialogClauseData.materialName}}</td>
        <td class="bg">预计采购数量:</td>
        <td colspan="3"></td>
      </tr>
      </tbody>
    </table>
    <br>
    <div align="right" style="padding:10px;">
      <el-button type="danger" @click="rejectClause()">驳回条款</el-button>
    </div>
    <el-table :data="tableData" height="300" border tooltip-effect="dark"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column v-if="isShow" prop="id" fixed label="id"></el-table-column>
      <el-table-column :show-overflow-tooltip="true" prop="rejectClauseStatus" fixed label="驳回状态">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.rejectClauseStatus==0?'未驳回条款':'已驳回条款' }}</span>
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" prop="vendorName" fixed label="供应商名称"></el-table-column>
      <el-table-column :show-overflow-tooltip="true" prop="taxName" label="发票税种"></el-table-column>
      <el-table-column :show-overflow-tooltip="true" prop="transferWayName" label="运输方式">></el-table-column>
      <el-table-column :show-overflow-tooltip="true" prop="deliveryDays" label="供货周期(天)"></el-table-column>
      <el-table-column :show-overflow-tooltip="true" prop="moq" label="最小采购量"></el-table-column>
      <el-table-column :show-overflow-tooltip="true" prop="mpq" label=" 最小包装量"></el-table-column>
      <el-table-column :show-overflow-tooltip="true" prop="paymentTermsName" label=" 付款条件"></el-table-column>
      <el-table-column :show-overflow-tooltip="true" prop="rejectClauseReason" label=" 驳回原因"></el-table-column>
    </el-table>
    
    <el-dialog title="驳回条款" :visible.sync="rejectClauseFormVisible" append-to-body>
      <el-form :model="formReject" label-width="80px">
        <el-form-item label="驳回原因">
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="formReject.dg_checkContent"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="rejectClauseFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="rejectClauseSubmit(formReject)">提 交</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import axios from 'axios';
  import qs from 'qs';

  export default {
    data() {
      return {
        arr: [],
        tableData: [],
        handleClose: '',
        rejectClauseFormVisible: false,
        formReject: {
          ids: '',
          dg_checkContent: ''
        },
        isShow: false,
        multipleSelection: [],
      }
    },
    props: ['dialogClauseData'],
    created() {
      this.clauseQuery();
    },
    methods: {
      clauseQuery() {
        let curl = this.lib.config.host.rfq + '/ctmgt/rfq/enquiry/compare/termCompare/loadTermData/' + this.dialogClauseData.enquiryId + '/' + this.dialogClauseData.id   //条款对比
        this.axios.post(curl, '').then((res) => {
          this.tableData = res.data.ctPsQuoteHead
        })
      },
      //驳回条款
      rejectClause() {
        var quoteIds = [];
        this.multipleSelection.map(item => {
          quoteIds.push(item.id);
        });
        if (quoteIds.length <= 0) {
          this.$message.error('请选择要驳回条款的数据');
        } else {
          this.rejectClauseFormVisible = true;
        }
      },
      //驳回条款提交
      rejectClauseSubmit() {
        var quoteIds = [];
        this.multipleSelection.map(item => {
          quoteIds.push(item.id);
        });
        this.formReject.ids = quoteIds.join(',');
          this.axios.post(this.lib.config.host.rfq + "/ctmgt/rfq/enquiry/compare/termCompare/checkTerm", qs.stringify(this.formReject))
            .then((response) => {
              if (response.data.success) {
                this.rejectClauseFormVisible = false;
                this.$message({ type: 'success', message: '驳回条款成功!' });
                this.clauseQuery();
              }
              this.rejectQuoteIds = [];
            })
            .catch((error) => {
              this.$message({ type: 'error', message: '驳回条款失败!' });
            });
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    }
  }
</script>


